<template>
    <div class="analysis-chart">
        <div class="model-head">
            <span class="title">课程目标达成度分析图</span>
        </div>
        <div class="model-body">
            <div
                v-show="list.length"
            >
                <div class="model-box">
                    <div class="left">
                        <div ref="chart1"></div>
                    </div>
                    <div class="right">
                        <div class="title">
                            <span class="course-target">{{ list.length ? list[count].name : '' }}</span><span>-能力达成分布图</span>
                        </div>
                        <div class="scatter" ref="chart2"></div>
                        <div class="text">学生代号</div>
                    </div>
                </div>
                <div class="model-box" v-show="false">
                    <div ref="chart3"></div>
                </div>
            </div>

            <div
                v-show="!list.length"
                v-loading="loading"
                element-loading-text="拼命加载中"
                class="no-info"
            >
                <img v-if="!loading" src='../../../../../assets/images/empty.png'/>
                <p v-if="!loading">暂无数据</p>
            </div>
        </div>
    </div>
</template>

<script>
import { analysisExpect } from '../../../../../api/courseReach';
import echarts from 'echarts';

export default {
    props: ['id'],
    data() {
        return {
            loading: false,
            chart: '',
            lineList: [],
            targetName: '',
            count: 0,
            list: []
        }
    },
    created() {
        this.initLineColor();
    },
    methods: {
        init() {
            this.loading = true;
            this.list.length = 0;
            const hashArr = [];
            analysisExpect({
                concludeId: this.id
            }).then((res) => {
                const chartOneData = { data: [], title: [] };
                const chartTwoData = [];
                const { data } = res;
                data.forEach((item, index) => {
                    const { proportion } = item;
                    const title = `目标${ index > 8 ? index + 1 : "0" + (index+1) }`;
                    chartOneData.data.push(proportion);
                    chartOneData.title.push({
                        value: title,
                        textStyle: {
                            color: index == 0 ? 'rgba(18, 119, 235, 1)' :'rgba(114, 114, 114, 1)',
                            fontWeight: index == 0 ? 600 : 400
                        }
                    });
                    chartTwoData.push({ name: title, data: [] });
                    item.data.forEach((items) => {
                        const { name, orderNo, proportion } = items;
                        chartTwoData[index].data.push([ orderNo, proportion, name ]);
                    });

                    if (chartTwoData[index].data.length == 0) {
                        hashArr.push(index);
                    }
                });
                this.list = (hashArr.length == chartTwoData.length) ? [] : chartTwoData;
                this.loading = false;
                if (this.list.length) {
                    this.$nextTick(() => {
                        this.chartOne(chartOneData);
                        this.chartTwo();
                    });
                }


            }).catch(() => {
                this.loading = false;
            });
        },
        initLineColor() {
            const arr = [[
                'rgba(119, 168, 145, 1)',
                'rgba(176, 210, 194, 1)'
            ],[
                'rgba(245, 132, 178, 1)',
                'rgba(248, 163, 143, 1)'
            ],[
                'rgba(80, 164, 164, 1)',
                'rgba(98, 187, 193, 1)'
            ],[
                'rgba(164, 138, 214, 1)',
                'rgba(123, 167, 225, 1)'
            ],[
                'rgba(106, 157, 201, 1)',
                'rgba(88, 103, 133, 1)'
            ],[
                'rgba(13, 195, 147, 1)',
                'rgba(28, 218, 162, 1)'
            ],[
                'rgba(234, 212, 86, 1)',
                'rgba(230, 148, 51, 1)'
            ],[
                'rgba(75, 136, 254, 1)',
                'rgba(46, 190, 239, 1)'
            ],[
                'rgba(242, 70, 123, 1)',
                'rgba(248, 124, 159, 1)'
            ],[
                'rgba(90, 85, 160, 1)',
                'rgba(145, 137, 225, 1)'
            ]];

            const list = [];
            arr.forEach((item) => {
                list.push(new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: item[0]},                  //柱图高亮渐变色
                            {offset: 1, color: item[1]}                   //柱图高亮渐变色
                        ]
                    ))
            });

            this.lineList = list;
        },
        chartOne(info) {
            const chart = echarts.init(this.$refs.chart1);
            const { data, title } = info;
            const option = {
                title: {
                    text: '成绩/期望值',
                    textStyle: {
                        fontSize: 14,
                        color: '#385899',
                        fontWeight: 400
                    },
                },
                tooltip : {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "rgba(114, 114, 114, 1)",
                        fontSize: 14,
                        fontWeight: 400,
                        interval: 0
                    },

                    axisLine: {
                        lineStyle: {
                            color: "rgba(238, 238, 238, 1)"
                        }
                    },
                    data: title
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    type: 'value',
                    maxInterval: 0.5,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(238, 238, 238, 1)"
                        }
                    },
                    axisLabel: {
                        color: "rgba(114, 114, 114, 1)",
                        fontSize: 14,
                        fontWeight: 400
                    },
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 50,
                        left: 200,
                        right: 200
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 50
                    }
                ],
                series: [{
                    data: data,
                    markLine: {
                        symbol: ['none','none'],
                        data: [{
                            yAxis: 1,
                            label: {
                                position: 'end',
                                formatter: '期望值'
                            },
                            lineStyle: {
                                color: "rgba(56, 88, 153, 1)"
                            }
                        }],
                        silent: true
                    },
                    type: 'bar',
                    barWidth: '20',
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            barBorderRadius: 20,
                            shadowColor: 'rgba(204, 204, 204, 0.7)',
                            color: (params) => {
                                return this.lineList[params.dataIndex]
                            }
                        }
                    },
                }]
            };

            chart.setOption(option);

            chart.on('click', (params) => {
                // 控制台打印数据的名称
                this.count = params.dataIndex;
                option.xAxis.data.forEach((item, index) => {
                    option.xAxis.data[index].textStyle =  {
                        color: index == params.dataIndex ? 'rgba(18, 119, 235, 1)' :'rgba(114, 114, 114, 1)',
                        fontWeight: index == params.dataIndex ? 600 : 400
                    };
                });
                chart.setOption(option);
                this.chartTwo();
            });
        },

        chartTwo() {
            const chart = echarts.init(this.$refs.chart2);
            const option = {
                title: {
                    text: '成绩/期望值',
                    textStyle: {
                        fontSize: 14,
                        color: '#385899',
                        fontWeight: 400
                    },
                },
                grid: {
                    left: 59,
                    right: 71,
                },
                xAxis: {
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "rgba(114, 114, 114, 1)",
                        fontSize: 14,
                        fontWeight: 400
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(238, 238, 238, 1)"
                        }
                    }
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(238, 238, 238, 1)"
                        }
                    },
                    axisLabel: {
                        color: "rgba(114, 114, 114, 1)",
                        fontSize: 14,
                        fontWeight: 400
                    },
                },
                tooltip: {
                    /*返回需要的信息*/
                    formatter: function(param) {
                        const val = param.value;
                        return '<div style="font-size: 14px;"> ' + val[2] + '(' + val[1] + ')' +'</div>';
                    }
                },
                series: [{
                    symbol: "rect",
                    symbolSize: 9,
                    data: this.list[this.count].data,
                    itemStyle: {
                        color: "rgba(58, 114, 255, 1)"
                    },
                    markLine: {
                        symbol: ['none','none'],
                        data: [{
                            type: "average",
                            label: {
                                position: 'end',
                                formatter: '平均成绩'
                            },
                            lineStyle: {
                                color: "rgba(47, 168, 172, 1)"
                            }
                        },{
                            yAxis: 1,
                            label: {
                                position: 'end',
                                formatter: '期望值'
                            },
                            lineStyle: {
                                color: "rgba(56, 88, 153, 1)"
                            }
                        }],
                        silent: true
                    },
                    type: 'scatter'
                }]
            };

            chart.setOption(option);
        },

        chartThree() {
            const chart = echarts.init(this.$refs.chart3);
            const option = {
                color: this.lineList,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    right: 111,
                    icon:'circle',
                    textStyle: {
                        color: "#3A3A3A",
                        fontSize: 14,
                        fontWeight: 400
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(204, 204, 204, 0.7)',
                    data: ['课程目标1', '课程目标2', '课程目标3', '课程目标4']
                },
                grid: {
                    left: 42,
                    right: 111,
                },
                xAxis: [
                    {
                        name: '分数段',
                        nameTextStyle: {
                            color: "#385899",
                            fontSize: 14,
                            fontWeight: 400,
                            padding: [30, 0, 0, 0]
                        },
                        type: 'category',
                        data: ['50~59分', '60~69分', '70~79分', '80~89分', '90~99分', '100分'],
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            color: "rgba(114, 114, 114, 1)",
                            fontSize: 14,
                            fontWeight: 400
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(238, 238, 238, 1)"
                            }
                        }
                    }
                ],
                yAxis: {
                    name: '学生人数',
                    nameTextStyle: {
                        aline: 'center',
                        color: "#385899",
                        fontSize: 14,
                        fontWeight: 400,
                        padding: [0, 30, 0, 0]
                    },
                    axisLine: {
                        show: false
                    },
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(238, 238, 238, 1)"
                        }
                    }
                },
                series: [
                    {
                        name: '课程目标1',
                        type: "bar",
                        barWidth: '20',
                        data:[10,20],
                        itemStyle: {
                            normal: {
                                shadowBlur: 10,
                                barBorderRadius: 20,
                                shadowColor: 'rgba(204, 204, 204, 0.7)'
                            }
                        }
                    }, {
                        name: '课程目标2',
                        type: "bar",
                        barWidth: '20',
                        data:[50],
                        itemStyle: {
                            normal: {
                                shadowBlur: 10,
                                barBorderRadius: 20,
                                shadowColor: 'rgba(204, 204, 204, 0.7)'
                            }
                        },
                    }, {
                        name: '课程目标3',
                        type: "bar",
                        barWidth: '20',
                        data:[20],
                        itemStyle: {
                            normal: {
                                shadowBlur: 10,
                                barBorderRadius: 20,
                                shadowColor: 'rgba(204, 204, 204, 0.7)'
                            }
                        },
                    }, {
                        name: '课程目标4',
                        type: "bar",
                        barWidth: '20',
                        data:[30],
                        itemStyle: {
                            normal: {
                                shadowBlur: 10,
                                barBorderRadius: 20,
                                shadowColor: 'rgba(204, 204, 204, 0.7)'
                            }
                        },
                    }
                ]
            };

            chart.setOption(option);
        },

    }
}
</script>

<style lang="scss" scoped>
.analysis-chart {
    margin-top: 36px;
    .model-head {
        display: flex;
        height: 18px;
        align-items: center;
        .title {
            position: relative;
            color: #385899;
            font-size: 18px;
            font-weight: 400;
            padding-left: 22px;
            &::before {
                content: '';
                top: 0;
                left: 0;
                position: absolute;
                width: 3px;
                height: 18px;
                background: #385899;
            }
        }
    }

    .model-body {
        margin-top: 20px;
        .model-box {
            display: flex;
            .left {
                box-sizing: border-box;
                width: 710px;
                background: #fff;
                box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                padding: 42px 6px 0 23px;
                div {
                    height: 318px;
                }
            }

            .right {
                margin-left: 20px;
                box-sizing: border-box;
                flex: 1;
                background: #fff;
                box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                padding: 0 31px 0 15px;
                .title {
                    text-align: center;
                    font-size: 18px;
                    height: 20px;
                    font-weight: bold;
                    padding: 18px 0 20px;
                    .course-target {
                        color: rgba(18, 119, 235, 1);
                    }
                }
                div {
                    height: 268px;
                }
                .text {
                    text-align: center;
                    color: rgba(56, 88, 153, 1);
                    font-size: 14px;
                    height: 14px;
                    font-weight: 400;
                }
            }
        }
        .model-box ~ .model-box {
            background: #fff;
            margin-top: 20px;
            padding: 30px 0 0 27px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            div {
                width: 100%;
                height: 430px;
            }
        }
    }
}
</style>
